<template>
  <div class="new-goods" ref="aaa">
    <div class="content" ref="cont">
      <div @click="itemClick(item)" class="new-goods-item" v-for="item in newGoods" :key="item.id">
        <img :src="item.list_pic_url" alt="" />
        <div class="bottom">
          <h3>{{ item.name }}</h3>
          <p class="title">{{ item.goods_brief }}</p>
          <p class="price"> {{ item.retail_price | filterPrice}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  props: {
    newGoods: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      scroll: null,
    };
  },
  methods: {
    itemClick(item) {
      let index = this.newGoods.findIndex(items => items.id == item.id);
      console.log(this.newGoods[index].id)
      let id = this.newGoods[index].id;
      this.$router.push({
        path: '/detail',
        query: {
          id,
        }
      })
    }
    // verScroll() {
    //   let width = this.newGoods.length * 110; // 动态计算出滚动区域的大小，前面已经说过了，产生滚动的原因是滚动区域宽度大于父盒子宽度
    //   this.$refs.cont.style.width = width + "px"; // 修改滚动区域的宽度
    //   console.log(width)
    //   this.$nextTick(() => {
    //     if (!this.scroll) {
    //       this.scroll = new BScroll(this.$refs.aaa, {
    //         startX: 0, // 配置的详细信息请参考better-scroll的官方文档，这里不再赘述
    //         click: true,
    //         scrollX: true,
    //         scrollY: false,
    //         eventPassthrough: "vertical",
    //       });
    //     } else {
    //       this.scroll.refresh(); //如果dom结构发生改变调用该方法
    //     }
    //   });
    // },
  },
  mounted() {
    // this.$nextTick(() => {
    //   let timer = setTimeout(() => {
    //     // 其实我也不想写这个定时器的，这相当于又嵌套了一层$nextTick，但是不这么写会失败
    //     if (timer) {
    //       clearTimeout(timer);
    //       this.verScroll();
    //     }
    //   }, 10);
    // });
  },
  filters: {
    filterPrice(val) {
      return '¥' +val 
    }
  }
};
</script>

<style lang="scss" scoped>
.new-goods {
  // height: 244px;
  height: fit-content;
  overflow-x: scroll;
  margin: 10px 0 10px;
  background-color: #fff;
  .content {
    width: fit-content;
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    // overflow-x: scroll;
    .new-goods-item {
      width: 140px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      img {
        width: 100%;
      }
      .bottom {
        padding: 0px 20px;

        h3 {
          margin: 5px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        p {
          margin: 10px 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #949494;
        }
        .price {
          color: #f00;
        }
      }
    }
  }
}
</style>